<template>
	<view class="date">
		<view class="head">
			<view class="icon" @click="switch_month_week('prev', true)">
				<u-icon name="arrow-left" size="36" color="#333"></u-icon>
			</view>
			<view class="title">{{ nowYear + '年' + nowMonth + '月' }}</view>
			<view class="icon" @click="switch_month_week('next', true)">
				<u-icon name="arrow-right" size="36" color="#333"></u-icon>
			</view>
		</view>
		<view class="date_dl date_dl_hd">
			<view class="dd" v-for="(item, index) in week" :key="index">{{ item }}</view>
		</view>
		<swiper :style="{ height: (retract ? 118 : week_list.length * 118) + 'rpx' }" :duration="300" :current="current" circular @change="change_date">
			<swiper-item>
				<view class="date_dl" v-show="!retract || index == to_prev_week_index" v-for="(item, index) in week_list_prev_co" :key="index">
					<view class="dd" @click="item_click(vo, index, key)" v-for="(vo, key) in item" :key="key">
						<view class="num" :class="[vo.today ? 'today' : '', vo.dot ? '' : 'disabled']">{{ vo.day }}</view>
						<view v-show="vo.dot" class="dot"  :class="[filterDateStatus(vo.date) ? 'active' : 'noActive']"></view>
					</view>
				</view>
				<!-- <view @click="open" class="retract icon"><text class="iconfont next icon-fanhui" :class="[retract ? '' : 'retract_icon']" /></view> -->
			</swiper-item>
			<swiper-item>
				
				<view class="date_dl" v-show="!retract || index == to_week_index" v-for="(item, index) in week_list" :key="index">
					<view class="dd" @click="item_click(vo, index, key)" v-for="(vo, key) in item" :key="key">
						<view class="num" :class="[vo.today ? 'today' : '', vo.dot ? '' : 'disabled']">{{ vo.day }}</view>
						<view v-show="vo.dot" class="dot"  :class="[filterDateStatus(vo.date) ? 'active' : 'noActive']"></view>
					</view>
				</view>
				<!-- <view @click="open" class="retract icon"><text class="iconfont next icon-fanhui" :class="[retract ? '' : 'retract_icon']" /></view> -->
			</swiper-item>
			<swiper-item>
				<view class="date_dl" v-show="!retract || index == to_next_week_index" v-for="(item, index) in week_list_next_co" :key="index">
					<view class="dd" @click="item_click(vo, index, key)" v-for="(vo, key) in item" :key="key">
						<view class="num" :class="[vo.today ? 'today' : '', vo.dot ? '' : 'disabled']">{{ vo.day }}</view>
						<view v-show="vo.dot" class="dot"   :class="[filterDateStatus(vo.date) ? 'active' : 'noActive']"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view @click="open" class="retract icon">
			<u-icon name="arrow-down" size="36" color="#333" v-if="retract"></u-icon>
			<u-icon name="arrow-up" size="36" color="#333" v-else></u-icon>
			<!-- <text class="iconfont next icon-fanhui" :class="[retract ? '' : 'retract_icon']" /> -->
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		dot_lists: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			week: ['日', '一', '二', '三', '四', '五', '六'],
			week_list: [],
			week_list_prev: [],
			week_list_prev_week: [],
			week_list_next: [],
			week_list_next_week: [],
			now_date: '',
			start_date: '',
			end_date: '',
			prev_date: '',
			next_date: '',
			nowYear: '',
			nowMonth: '',
			nowDay: '',
			retract: true,
			to_week_index: 0,
			to_prev_week_index: 0,
			to_next_week_index: 0,
			nowTime: 0,
			dot_list: [],
			current: 1,
			date: ''
		};
	},
	watch: {
		value(value) {
			this.get_date(Date.parse(value.replace(/-/g, '/')));
		},

		dot_lists: {
			immediate: true,
			handler(value) {
				this.dot_list = value;
				this.set_doc_lists_update();
			}
		}
	},
	computed: {
		week_list_prev_co() {
			return this.retract ? this.week_list_prev_week : this.week_list_prev;
		},
		week_list_next_co() {
			return this.retract ? this.week_list_next_week : this.week_list_next;
		}
	},
	created() {
		this.init();
	},
	methods: {
		change() {
			let value = {
				fulldate: this.date,
				nowYear: this.nowYear,
				nowMonth: this.nowMonth
			};

			this.$emit('change', value);
		},
		init() {
			console.log(this.value);
			if (this.value) {
				this.get_date(Date.parse(this.value.replace(/-/g, '/')));
			} else {
				this.get_date();
			}

			this.doc_list_update();
			this.update_month();
		},
		open() {
			this.retract = !this.retract;
			this.get_date(this.nowTime);
			this.set_to_day('week_list_prev');
			this.set_to_day('week_list_next');

			this.change_week();

			if (this.retract) {
				this.update_swiper_item('week');
			} else {
				this.update_swiper_item('month');
			}
			this.set_doc_lists_update();
		},
		change_week() {
			if (this.to_week_index < this.week_list.length - 1) {
				this.to_next_week_index = this.to_week_index + 1;
				this.week_list_next_week = this.week_list;
			} else {
				this.to_next_week_index = 0;
				this.week_list_next_week = this.week_list_next;
			}

			if (this.to_week_index == 0) {
				this.update_month();

				// if(){
				let next_day = this.week_list_prev[this.week_list_prev.length - 1][6].day;

				// }
				this.to_prev_week_index = this.week_list_prev.length - 1 - Math.ceil(next_day / 7);

				this.week_list_prev_week = JSON.parse(JSON.stringify(this.week_list_prev));
			} else {
				this.to_prev_week_index = this.to_week_index - 1;
				this.week_list_prev_week = this.week_list;
			}
		},
		change_date_week(type) {
			let week_list = this.week_list;
			let to_week_index = this.to_week_index;
			if (type == 'prev') {
				this.to_week_index = this.to_prev_week_index;
				this.to_prev_week_index = this.to_next_week_index;
				this.to_next_week_index = to_week_index;

				this.week_list = this.week_list_prev_week;
				this.week_list_prev_week = this.week_list_next_week;
				this.week_list_next_week = week_list;
			} else if (type == 'next') {
				this.to_week_index = this.to_next_week_index;
				this.to_next_week_index = this.to_prev_week_index;
				this.to_prev_week_index = to_week_index;

				this.week_list = this.week_list_next_week;
				this.week_list_next_week = this.week_list_prev_week;
				this.week_list_prev_week = week_list;
			}

			this.set_to_day_all();
		},
		change_date_month(type) {
			let week_list = this.week_list;
			if (type == 'prev') {
				this.week_list = this.week_list_prev;
				this.week_list_prev = this.week_list_next;
				this.week_list_next = week_list;
			} else if (type == 'next') {
				this.week_list = this.week_list_next;
				this.week_list_next = this.week_list_prev;
				this.week_list_prev = week_list;
			}
		},
		change_date(e) {
			let primary_current = this.current;
			let current = e.detail.current;

			this.current = current;

			if (primary_current - current == -1 || primary_current - current == 2) {
				if (this.retract) {
					this.switch_month_week('next');
					this.change_week();
					if (primary_current - current == -1 && current != 1) {
						this.change_date_week('prev');
					} else if (primary_current - current == 2) {
						this.change_date_week('next');
					}
				} else {
					this.get_date(this.get_month('next'));
					this.update_month();
					if (primary_current - current == -1 && current != 1) {
						this.change_date_month('prev');
					} else if (primary_current - current == 2) {
						this.change_date_month('next');
					}
				}
			} else {
				if (this.retract) {
					this.switch_month_week('prev');
					this.change_week();
					if (primary_current - current == 1 && current != 1) {
						this.change_date_week('next');
					} else if (primary_current - current == -2) {
						this.change_date_week('prev');
					}

					return false;
				} else {
					this.get_date(this.get_month('prev'));
					this.update_month();
					if (primary_current - current == 1 && current != 1) {
						this.change_date_month('next');
					} else if (primary_current - current == -2) {
						this.change_date_month('prev');
					}
				}
			}

			this.set_to_day_all();
			this.set_doc_lists_update();
			this.change();
		},
		update_month() {
			this.get_date(this.get_month('prev'), 'prev');
			this.get_date(this.get_month('next'), 'next');
		},
		set_doc_lists_update() {
			this.doc_list_update('week_list');
			this.doc_list_update('week_list_prev');
			this.doc_list_update('week_list_next');
			this.doc_list_update('week_list_prev_week');
			this.doc_list_update('week_list_next_week');
		},
		doc_list_update(week_list = 'week_list') {
			let list = [];
			//console.log("week数据格式",JSON.stringify(this[week_list]))
			this[week_list].map((item, index) => {
				list.push(
					item.map((vo, key) => {
						vo.dot = this.dot_list.indexOf(vo.date) > -1;
						return { ...vo };
					})
				);
			});
			this[week_list] = list;
		},
		set_to_day(type) {
			let list = [];

			this[type].map((item, index) => {
				list.push(
					item.map((vo, key) => {
						if (vo.date == `${this.date}`) {
							vo.today = true;
						} else {
							vo.today = false;
						}
						return { ...vo };
					})
				);
			});
			this[type] = list;
		},
		item_click(item, item_index = -1) {
			if (!this.retract && item.type !== 'month') {
				return false;
			}
			this.date = item.date;
			if (item.type == 'month') {
				this.nowDay = item.day;
				if (item_index >= 0) this.to_week_index = item_index;
			} else if (this.retract) {
				this.nowDay = item.day;
			}

			this.set_to_day_all(item_index);

			this.nowTime = Date.parse(`${item.date}`.replace(/-/g, '/'));
			this.change();
			this.set_doc_lists_update();
		},
		set_to_day_all(item_index) {
			this.set_to_day('week_list');
			this.set_to_day('week_list_prev');
			this.set_to_day('week_list_next');
			this.set_to_day('week_list_prev_week');
			this.set_to_day('week_list_next_week');
		},
		get_month(type) {
			let nowMonth = this.nowMonth;
			let nowYear = this.nowYear;
			let nowDay = this.nowDay;

			if (type == 'prev') {
				if (nowMonth == 1) {
					nowMonth = 12;
					nowYear = nowYear - 1;
				} else {
					nowMonth--;
				}
			} else if (type == 'next') {
				if (nowMonth == 12) {
					nowMonth = 1;
					nowYear = nowYear + 1;
				} else {
					nowMonth++;
				}
			}

			let days = this.get_month_days(nowMonth, nowYear);
			if (nowDay > days) {
				nowDay = days;
			}

			return Date.parse(`${nowYear}/${nowMonth}/${nowDay}`);
		},
		switch_month_week(type = 'next', update_week = false) {
			if (this.retract) {
				if (type == 'prev') {
					this.get_date(this.nowTime - 86400 * 7 * 1000);
				} else if (type == 'next') {
					this.get_date(this.nowTime + 86401 * 7 * 1000);
				}
				if (update_week) {
					this.update_swiper_item('week');
					this.set_doc_lists_update();
				}
			} else {
				this.get_date(this.get_month(type));
				this.update_swiper_item('month');
			}
			this.doc_list_update();
			this.change();
			this.set_to_day_all();
		},
		update_swiper_item(type = 'month') {
			if (type == 'month') {
				if (this.current == 0) {
					this.change_date_month('next');
				} else if (this.current == 2) {
					this.change_date_month('prev');
				}
			} else if (type == 'week') {
				if (this.current == 0) {
					this.change_date_week('next');
				} else if (this.current == 2) {
					this.change_date_week('prev');
				}
			}
		},
		next() {
			this.get_date(this.next_date);
		},
		get_date(value = '', type = 'same') {
			let date = new Date();
			if (value) {
				date = new Date(value);
			}
			let nowMonth = date.getMonth() + 1,
				nowYear = date.getFullYear(),
				nowDay = date.getDate(),
				nowTime = date.getTime(),
				nowWeek = date.getDay();

			let days = this.get_month_days(nowMonth, nowYear);
			let start_date = new Date(nowYear, nowMonth - 1, 1);
			let end_date = new Date(nowYear, nowMonth - 1, days);
			let prev_date = new Date(start_date.getTime() - 1);
			let prev_date_days = prev_date.getDate();
			let next_date = new Date(end_date.getTime() + 86401 * 1000);
			let next_date_days = next_date.getDate();
			let start_week = start_date.getDay();
			let date_arrs = [];

			let week_list = [];
			let count_days = 35;

			for (let i = prev_date_days - start_week + 1; i <= prev_date_days; i++) {
				date_arrs.push({
					day: i,
					type: 'prev',
					date: `${prev_date.getFullYear()}-${prev_date.getMonth() + 1}-${i}`,
					dot: false
				});
			}

			for (let i = 1; i <= days; i++) {
				date_arrs.push({
					day: i,
					type: 'month',
					today: i == nowDay ? true : false,
					date: `${nowYear}-${nowMonth}-${i}`
				});

				if (i == nowDay && type == 'same') {
					this.date = `${nowYear}-${nowMonth}-${i}`;
				}
				date_arrs.forEach(vo => {
					vo.dot = this.dot_list && this.dot_list.length > 0 ? this.dot_list.indexOf(vo.date) > -1 : false;
				});
			}

			let date_arrs_length = date_arrs.length;

			// if(date_arrs_length > 35){
			count_days = 42;
			// }
			for (let i = 1; i <= count_days - date_arrs_length; i++) {
				date_arrs.push({
					day: i,
					type: 'next',
					date: `${next_date.getFullYear()}-${next_date.getMonth() + 1}-${i}`,
					dot: false
				});
			}

			for (let i = 0; i < date_arrs.length / 7; i++) {
				let arr = [];
				for (let j = 0; j < 7; j++) {
					if (date_arrs[i * 7 + j].today) {
						if (type == 'same') {
							this.to_week_index = i;
						}
					}
					arr.push(date_arrs[i * 7 + j]);
				}
				week_list.push(arr);
			}

			if (type == 'same') {
				this.week_list = week_list;
				this.nowYear = nowYear;
				this.nowMonth = nowMonth;
				this.nowDay = nowDay;
				this.nowTime = nowTime;
				this.start_date = start_date;
				this.end_date = end_date;
				this.prev_date = prev_date;
				this.next_date = next_date;
			} else if (type == 'prev') {
				this.week_list_prev = week_list;
			} else if (type == 'next') {
				this.week_list_next = week_list;
			}
		},
		get_month_days(nowMonth, nowYear) {
			let month_arr = [1, 3, 5, 7, 8, 10, 12];
			let days = 0;
			if (nowMonth == 2) {
				if (nowYear % 4 == 0) {
					days = 29;
				} else {
					days = 28;
				}
			} else if (month_arr.indexOf(nowMonth) >= 0) {
				days = 31;
			} else {
				days = 30;
			}
			return days;
		},
		filterDateStatus(date) {
		    // 处理输入日期
		    let curDate = new Date(date.replace(/-/g, "/"));
		    curDate.setHours(0, 0, 0, 0);  // 清除时间部分
		    
		    // 获取当前日期（不含时间部分）
		    let today = new Date();
		    today.setHours(0, 0, 0, 0);
		    
		    // 比较两个日期
		    return curDate >= today;
		}

	}
};
</script>
<style lang="less">
//@import (less) url('@/static/lx-calendar/fonts/iconfont.css');
</style>
<style lang="scss">
// @color:#81a3e2;
// @color_disabled: #ececf2;
// @color_standard: #333;
// @color_border: #f5f5f5;

.date {
	width: 100%;
	background: #fff;
}

.head {
	display: flex;
	align-items: center;
	height: 100rpx;
	justify-content: center;
	border-bottom: 1rpx solid #f5f5f5;
	color: #333;
	.title {
		width: 100%;
		font-size: 30rpx;
		text-align: center;
	}

	.icon {
		display: block;

		.next {
			transform: rotate(180deg);
			display: block;
		}
	}
}

.retract {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 10upx;
	.iconfont {
		transform: rotate(270deg);

		&.retract_icon {
			transform: rotate(90deg);
		}
	}
}

.date_dl {
	display: flex;
	width: 100%;

	&.date_dl_hd {
		// background: #ececf2;
		line-height: 50upx;
		color: #333;
		font-size: 24upx;
	}

	.dd {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.num {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			line-height: 70rpx;
			margin: 24rpx auto;
			background: #d1d1e9;

			&.disabled {
				background: #ececf2;
				color: #999;
			}

			&.month {
				color: #333;
			}

			&.today {
				background: $u-primary;
				color: #fff;
				&.disabled {
					opacity: 0.5;
					color: #fff;
				}
			}
		}

		.dot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			&.active{
				background: $u-primary;
			}
			&.noActive{
				background: #999;
			}
		}
	}
}
</style>
